<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">文件管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>首页轮播图</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" size="small" icon="el-icon-upload" id="bntAdd" @click="toInsertImage" >上传</el-button>
    <el-upload
        style="float: right;margin-right: 20px;margin-top: 4px"
        class="upload-demo"
        ref="upload"
        action="none"
        :on-change="onFile"
        :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">不能超过100MB</div>
    </el-upload>
    <br/>
    <br/>
    <br/>
    <el-table
        :data="images"
        border
        max-height="400px"
        style="width: 100%;overflow: scroll">
      <el-table-column
          prop="id"
          label="ID"
          width="100">
      </el-table-column>
      <el-table-column
          prop="image"
          label="图片名"
          >
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="200">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-text="设置轮播图"
              :active-value="1"
              :inactive-value="0"
              @change="changStatus($event,scope.row.id)"
              >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          width="180"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="toCheckImage(scope.row.image)" >查看</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="toDeleteImage(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {imageList, imageInsert, imageDelete, imageUpdate, upLoadFile} from '@/api'
import {uuid} from "vue-uuid";
export default {
  name: "Carousel",
  data() {
    return {
      images:[],
      total: 0,
      pagesize: 5,
      formData: null,
      image:'',
    }
  },

  created() {
    imageList().then((result)=>{
      this.images = result.data.list;
      this.total = result.data.total;
      this.pagesize = result.data.pagesize;
    })
  },

  methods: {
    changStatus($event,id){
      imageUpdate({id:id,status:$event});
      this.$message.success('设置成功');
    },

    onFile(file){
      if (file.size < 1048576*100) {
        let filename = uuid.v1();
        let type = '.' + file.name.split('.')[1];
        this.image = filename + type;
        this.formData = new FormData();
        this.formData.append("image", file.raw);
        this.formData.append("fileName", this.image);
      }else {
        this.$message.error("文件过大");
      }
    },

    toInsertImage(){
      let  image = {image: this.image};
      if (this.formData!=null) {
        upLoadFile(this.formData);
        imageInsert(image).then(() => {
          imageList().then((result) => {
            this.images = result.data.list;
            this.total = result.data.total;
            this.pagesize = result.data.pagesize;
          })
        })
      }else{
        this.$message.error("上传失败");
      }
    },

    toCheckImage(image){
      let url = '<img style="width: 100%;" src= "https://yashuang.oss-cn-beijing.aliyuncs.com/'+image+'"/>'
      this.$alert(url, '查看图片', {
        dangerouslyUseHTMLString: true,
        customClass: 'withClass'
      });
    },

    toDeleteImage(id){
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        imageDelete({id:id}).then(()=>{
          imageList().then((result)=>{
            this.images = result.data.list;
            this.total = result.data.total;
            this.pagesize = result.data.pagesize;
          })
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style>
#bntAdd{
  float: right;
  margin-top: 4px;
}

.withClass{
  width: 800px;
}
</style>
